<template>
	<div class="member-opinion">
		<div class="service" @click="$router.push('member-service')">
			<div class="left">
				<i class="iconfont icon-kefu"></i>
				<p>如有疑问需要帮助，请联系专属客服快速解决</p>
			</div>
			<van-icon name="arrow" />
		</div>

		<div class="message">
			<van-field
				v-model="message"
				rows="2"
				autosize
				type="textarea"
				maxlength="300"
				placeholder="请在此输入您的宝贵意见，使用体验/优化建议都可以告诉我"
			/>
			<p>您还可以输入{{ 300 - message.length }}个字</p>
		</div>

		<div class="commit-message" @click="commitMessage">
			提交反馈
		</div>

		<div class="message-list">
			<label><i></i>我的反馈</label>
			<!--<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">-->
			<van-list
				v-model="loading"
				:finished="finished"
				:error.sync="error"
				@load="loadMore"
				finished-text="没有更多了"
				loading-text="拼命加载中"
			>
				<div class="message-item" v-for="(item, index) in list" :key="index">
					<div class="top">
						<p class="time">{{ item.createTime }}</p>
						<div class="status" :class="[item.replyMsg ? 'already' : 'wait']">{{ item.replyMsg ? '已回复' : '待回复' }}</div>
					</div>
					<p class="message">{{ item.content }}</p>
					<div class="reply" v-if="item.replyMsg">
						<p><i class="iconfont icon-kefu1"></i>：{{ item.replyMsg }}</p>
					</div>
				</div>

				<div slot="error">
					<empty emptyText="暂无反馈" :src="require('@/assets/images/common/empty-cash.png')" offsetTop="150"></empty>
				</div>
			</van-list>
			<!--</van-pull-refresh>-->
		</div>
	</div>
</template>

<script>
import { List } from 'vant';
import { Empty } from '@/components';
export default {
	name: 'special-zero',
	components: {
		Empty,
		'van-list': List
	},
	data() {
		return {
			isRefresh: false, // 控制是否刷新
			loading: false, // 控制loading显示
			finished: false, // 控制是否加载更多商品
			error: false,
			message: '',
			list: [],
			params: {
				page: 1,
				size: 20
			}
		};
	},
	methods: {
		commitMessage() {
			if (!this.message) {
				this.$toast('请输入您的宝贵意见或优化建议');
				return false;
			}
			let params = {
				content: this.message
			};
			this.$service.shopping.faquser
				.add(params)
				.then(() => {
					this.$toast('提交成功');
					this.message = '';

					this.error = false;
					this.loading = true;
					this.finished = false;
					this.list = [];
					this.params.page = 1;
					this.loadMore();
				})
				.catch(err => {
					this.$toast(err.message);
				});
		},
		// 下拉刷新
		onRefresh() {
			this.error = false;
			this.list = [];
			this.loading = true;
			this.finished = false;
			this.params.page = 1;
			this.loadMore('refresh');
		},
		// 追加数据
		loadMore(operate) {
			this.$service.shopping.faquser.page(this.params).then(res => {
				this.list = this.list.concat(res.list);
				// 加载状态结束
				this.loading = false;
				this.params.page += 1;

				// 刷新列表
				if (operate === 'refresh') {
					this.$toast('刷新成功');
					this.isRefresh = false;
				}

				// 暂无数据
				if (this.list.length === 0) {
					this.params.page = 1;
					this.error = true;
				} else if (this.list.length >= res.pagination.total) {
					// 数据全部加载完成
					this.finished = true;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.member-opinion {
	padding: 22px 18px;
	.service {
		width: 100%;
		height: 80px;
		background: $color-white;
		border-radius: 16px;
		font-size: 24px;
		color: $main-color;
		padding: 0 20px;
		@include flexBox(space-between, center);
		.left {
			@include flexBox(null, center);
			i {
				margin-right: 10px;
				font-size: 34px;
			}
		}
	}
	.message {
		margin-top: 20px;
		border-radius: 16px;
		overflow: hidden;
		background: $color-white;
		/deep/ .van-field__control {
			min-height: 250px;
		}
		p {
			font-size: 24px;
			color: #717076;
			padding: 20px 30px;
		}
	}
	.commit-message {
		width: 336px;
		background: $main-color;
		border-radius: 50px;
		line-height: 80px;
		text-align: center;
		font-size: 28px;
		color: $color-white;
		margin: 78px auto;
	}
	.message-list {
		label {
			color: $main-color;
			font-size: 32px;
			margin-bottom: 6px;
			@include flexBox(null, center);
			i {
				width: 8px;
				height: 40px;
				background: $main-color;
				display: block;
				border-radius: 50px;
				margin-right: 14px;
			}
		}
		/deep/ .van-list {
			min-height: 600px;
		}
		.message-item {
			padding: 24px 26px;
			background: $color-white;
			border-radius: 16px;
			margin-top: 20px;
			.top {
				@include flexBox(space-between, center);
				.time {
					font-size: 22px;
					color: #717076;
				}
				.status {
					padding: 2px 8px;
					font-size: 22px;
					border-radius: 8px;
					&.wait {
						color: #ef3c49;
						border: 2px solid #ef3c49;
						background: #ffefef;
					}
					&.already {
						color: #909090;
						border: 2px solid #909090;
						background: #f6f7fa;
					}
				}
			}
			.message {
				font-size: 28px;
				word-break: break-word;
				color: #171717;
			}
			.reply {
				background: #f6f7fa;
				padding: 18px;
				color: #717076;
				font-size: 28px;
				margin-top: 22px;
				border-radius: 16px;
				line-height: 44px;
				word-break: break-word;
				i {
					margin-right: 10px;
					font-size: 32px;
				}
			}
		}
	}
}
</style>
